<!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>树组件</title>
    <style type="text/css">
        ul>li {
            list-style: none;
            margin-bottom: 5px;
        }

        .open {
            margin-top: 10px;
            margin-left: -10px;
            border: 6px solid transparent;
            display: inline-block;
            width: 0px;
            height: 0px;
            border-top-color: black;

        }

        .close {
            margin-top: 10px;
            margin-left: -10px;
            border: 6px solid transparent;
            display: inline-block;
            width: 0px;
            height: 0px;
            border-left-color: black;
        }

        input[type='checkbox'] {
            margin-right: 5px;
            width: 20px;
            height: 20px;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: 1px solid #c9c9c9;
            border-radius: 5px;
            outline: none;
            color: white;
            text-align: center;
        }

        input[type='checkbox']:before {
            content: '+';
            color: transparent;
        }

        input[type=checkbox]:checked {
            background-color: #3cb1d8;
        }

        input[type=checkbox]:checked:before {
            content: '+';
            color: white;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="tree">
        <ul id="parent">
        </ul>
    </div>


    <script type="text/javascript">
        var data = {
            '0-0': {
                '0-0-0': {
                    '0-0-0-0': '',
                    '0-0-0-1': '',
                    '0-0-0-2': '',
                },
                '0-0-1': {
                    '0-0-1-0': '',
                    '0-0-1-1': '',
                    '0-0-1-2': '',
                },
                '0-0-2': '',
            },
            '0-1': {
                '0-1-0': '',
                '0-1-1': '',
            },
            '0-2': '',
        };
        

        function createTree(data, parent) {
            for (var key in data) {
                var li = document.createElement('li');
                if (!data[key])
                    li.innerHTML = ' <input type="checkbox"></input>' + key;
                else {
                    li.innerHTML =
                        '<div><span class="open" onclick="toggle(this)"></span><input type="checkbox" onclick="onSelect(this)"></input>' +
                        key + '</div>';
                    var ul = document.createElement('ul');
                    li.appendChild(ul);
                   createTree(data[key], ul);
                }
                parent.appendChild(li);
            }
        }
       createTree(data, document.getElementById('parent'));

        //有子节点的树节点，可以折叠或展开。
        function toggle(event) {
            var parent = event.parentNode.nextElementSibling;
            if (parent.style.display == 'none') {
                parent.style.display = 'block';
                event.className = 'open';

            } else {
                parent.style.display = 'none';
                event.className = 'close';
            }
        }

        //树节点能够选中，在选中后触发一个 onSelect 事件，事件可以通过配置项传入
        function onSelect(event) {
            var parent = event.parentNode.nextElementSibling;
            if (event.checked) {
                for (var i = 0; i < parent.querySelectorAll('input').length; i++) {
                    parent.querySelectorAll('input')[i].checked = true;
                }
            } else {
                for (var i = 0; i < parent.querySelectorAll('input').length; i++) {
                    parent.querySelectorAll('input')[i].checked = false;
                }
            }
        }
    </script>



</body>

</html>

